import React from 'react';
import moment from 'moment';
import { Table, Descriptions, Card } from 'antd';

class ViewPage extends React.Component<any, any> {
  render() {
    const { data, configData } = this.props;
    const columns = [
      {
        title: '工单号',
        render: (record: any) => (record.jobNum + '-' + record.assemblySeq + '-' + record.mtlSeq),
      },
      {
        title: '物料编码',
        dataIndex: 'partNum',
      },
      {
        title: '描述',
        dataIndex: 'partDescription',
      },
      {
        title: '需求量',
        dataIndex: 'requiredQty',
      },
      {
        title: '已领量',
        dataIndex: 'issuedQty',
      },
      {
        title: '未领量',
        render: (record: any) => record.requiredQty - record.issuedQty
      },
      {
        title: '领料量',
        dataIndex: 'pickQty',
      },
      {
        title: '单位',
        dataIndex: 'ium',
      },
    ];
    return (
      <Card bordered={false} key="C1">
        <Descriptions title={<h2 style={{ textAlign: 'center' }}>领料单</h2>} bordered={false}>
          <Descriptions.Item label="领料单号">{data[0]?.pickNum}</Descriptions.Item>
          <Descriptions.Item label="领料人">{data[0]?.pickUser}</Descriptions.Item>
          <Descriptions.Item label="打印时间">{moment(new Date()).format('YYYY-MM-DD')}</Descriptions.Item>
          <Descriptions.Item label="公司名称"><strong>{configData?.companyName}</strong></Descriptions.Item>
        </Descriptions>
        <Table
          columns={columns}
          dataSource={data}
          pagination={false}
          bordered />
          <br />
        <Descriptions bordered={false}>
          <Descriptions.Item label="领料人签字">_______________</Descriptions.Item>
          <Descriptions.Item label="审核人签字">_______________</Descriptions.Item>
          <Descriptions.Item label="领料时间">___________年_______月_______日</Descriptions.Item>
        </Descriptions>

      </Card>
    );
  }
}

export default ViewPage;
